<template>
  <div>
    <el-table :data="tableData" style="width: 100%" 
        element-loading-text="加载中..." 
        element-loading-spinner="el-icon-loading"
        v-loading="loading">
      <!-- 表格列配置，可以根据需求自行调整 -->
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="age" label="年龄" width="100"></el-table-column>
      <!-- 其他表格列... -->
    </el-table>
    <!-- 表格分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total"
      layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  </div>
</template>
  
<script setup>
import { ref, reactive, onMounted } from 'vue';


// 加载动画
const loading = ref(false)


// 表格数据
const tableData = ref([]);
// 当前页码和每页显示条数
const currentPage = ref(1);
const pageSize = ref(10);
// 总条数，需要根据实际需求设置
const total = ref(50);

// 处理每页条数变更
const handleSizeChange = (size) => {
  pageSize.value = size;
  // 模拟获取数据的方法，可以替换为你自己的数据获取逻辑
  loading.value = true
  getTableData();
  loading.value = false
};

// 处理当前页码变更
const handleCurrentChange = (page) => {
  currentPage.value = page;
  // 模拟获取数据的方法，可以替换为你自己的数据获取逻辑
  loading.value = true
  getTableData();
  loading.value = false
};

// 模拟获取表格数据的方法
const getTableData = () => {
  // 模拟异步获取数据，可以替换为你自己的异步请求
  
  setTimeout(() => {
    const startIdx = (currentPage.value - 1) * pageSize.value;
    tableData.value = [];
    for (let i = startIdx; i < startIdx + pageSize.value; i++) {
      tableData.value.push({
        id: i + 1,
        name: `User ${i + 1}`,
        age: Math.ceil(Math.random() * 50) + 20,
      });
    }
  }, 500);

 
};

// 初始化时获取表格数据
onMounted(() => {
  loading.value = true
  getTableData();
  loading.value = false
});


</script>
  
<style>
/* 在这里添加自定义样式 */
</style>